<template>
<div class='pageBox'>
	<div class='page-box'>
	<div class="page-title" >
		<div class="returnPage1" @click="returnPage">返回</div>
	</div>
	<div class="page-main">
		<!-- 左1 -->
		<div class="page-grid gird-bgUrl gird-bgUrl1">
			<div class="grid-title"></div>
			<div class="grid-main">
				<div class="grid-main-index">
					<div class="grid-main-index-left">企业名称：</div>
					<div class="grid-main-index-right">{{	data01?data01.fentname:''  }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">统一社会信用代码：</div>
					<div class="grid-main-index-right">{{	data01?data01.fentlicence:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">注册资本：</div>
					<div class="grid-main-index-right">{{	data01?data01.fentregistfund:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">类型：</div>
					<div class="grid-main-index-right">{{	data01?data01.fenttypeid:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">法人：</div>
					<div class="grid-main-index-right">{{	data01?data01.fentjuridical:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">成立时间：</div>
					<div class="grid-main-index-right">{{	data01?data01.fentcreatetime:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">营业期限：</div>
					<div class="grid-main-index-right">{{	data01?data01.fendtime:'' }}</div>
				</div>
			</div>
		</div>
		<!-- center上 -->
		<div class="page-grid ">
			<div class="grid-main1">
				<div class="grid-main-bg">
					<div class="bg-index">
						<div class="bg-index-top">{{	data03.cjzts?data03.cjzts:0 }}</div>
						<div class="bg-index-bottom">总套数</div>
					</div>
					<div class="bg-index">
						<div class="bg-index-top">{{	data03.htbats?data03.htbats:0 }}</div>
						<div class="bg-index-bottom">合同备案套数</div>
					</div>
					<div class="bg-index">
						<div class="bg-index-top">{{	data03.cjtshbzz?data03.cjtshbzz:0 }}%</div>
						<div class="bg-index-bottom">环比增长</div>
					</div>
				</div>
				<div class="grid-main-bg">
					<div class="bg-index">
						<div class="bg-index-top">{{	data03.bzxse?data03.bzxse:0 }}</div>
						<div class="bg-index-bottom">本周销售额</div>
					</div>
					<div class="bg-index">
						<div class="bg-index-top">{{	data03.szxse?data03.szxse:0 }}</div>
						<div class="bg-index-bottom">上周销售额</div>
					</div>
					<div class="bg-index">
						<div class="bg-index-top">{{	data03.xsehbzz?data03.xsehbzz:0 }}%</div>
						<div class="bg-index-bottom">环比增长</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 右1 -->
		<div class="page-grid gird-bgUrl gird-bgUrl2">
			<div class="grid-mains">
				<div class="grid-main-index">
					<div class="grid-main-index-left">不动产权证：</div>
					<!-- <div class="grid-main-index-right">{{	data02.zsydghxkz  }}</div> -->
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">建设用地规划许可证：</div>
					<div class="grid-main-index-right">{{	data02?data02.zsydghxkz:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">建设工程规划许可证：</div>
					<div class="grid-main-index-right">{{ data02?data02.zsgcghxkz:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">建设工程施工许可证：</div>
					<div class="grid-main-index-right">{{	data02?data02.zsgcsgxkz:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">商品房销售（预售）许可证：</div>
					<div class="grid-main-index-right">{{	data02?data02.fpfysxkz:'' }}</div>
				</div>
			</div>
		</div>
		<!-- 左2 -->
		<div class="page-grid gird-bgUrl gird-bgUrl3">
			<div class="grid-main">
				<div class="grid-main-index">
					<div class="grid-main-index-left">项目编号：</div>
					<div class="grid-main-index-right">{{	data02?data02.xmbh:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">项目名称：</div>
					<div class="grid-main-index-right">{{	data02?data02.xmmc:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">所属区域：</div>
					<div class="grid-main-index-right">{{ data02?data02.ssqy:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">住所：</div>
					<div class="grid-main-index-right">{{ data02?data02.xxdz:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">经纬度：</div>
					<div class="grid-main-index-right rem2">{{	data02?data02.jwd:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">项目销售负责人：</div>
					<div class="grid-main-index-right">{{	data02?data02.xmxsfzr:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">负责人手机号：</div>
					<div class="grid-main-index-right">{{ data02?data02.fzrsjh:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">自然栋数：</div>
					<div class="grid-main-index-right">{{	data02?data02.zrzs:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">总占地：</div>
					<div class="grid-main-index-right">{{ data02?data02.zzdmj:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">总建筑面积：</div>
					<div class="grid-main-index-right">{{	data02?data02.zjzmj:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">总套数：</div>
					<div class="grid-main-index-right">{{	data02?data02.zts:'' }}</div>
				</div>
			</div>
		</div>
		<!-- center中 -->
		<div class="page-grid ">
		</div>
		<!-- 右2 -->
		<div class="page-grid gird-bgUrl gird-bgUrl4">
			<div class="grid-main">
				<barLinePublic class="charH"
							v-if="data04.typeData.length > 0 "
							:housingSupplyStatsData="data04"
							@dialogData="dialogData"
				></barLinePublic>
			</div>
		</div>
		<!-- 左3 -->
		<div class="page-grid gird-bgUrl gird-bgUrl5">
			<el-scrollbar ref="scrollbarRef" class="scrolls"  always @scroll="scroll">
				<div class="grid-main2">
				<div class="grid-main-index">
					<div class="grid-main-index-left">项目简介：</div>
					<div class="grid-main-index-rights">{{	data02?data02.xmjj:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">设备装修：</div>
					<div class="grid-main-index-right">{{	data02?data02.sbzx:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">施工进度：</div>
					<div class="grid-main-index-rights">{{	data02?data02.sgjd:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">配套设施：</div>
					<div class="grid-main-index-rights">{{	data02?data02.ptss:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">周围公交：</div>
					<div class="grid-main-index-rights">{{	data02?data02.zwgj:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">用地取得：</div>
					<div class="grid-main-index-rights">{{	data02?data02.ydqd:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">开盘日期：</div>
					<div class="grid-main-index-rights">{{	data02?data02.kprq:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">入住日期：</div>
					<div class="grid-main-index-rights">{{	data02?data02.rzrq:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">物业类型：</div>
					<div class="grid-main-index-rights">{{	data02?data02.wylx:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">开发状态：</div>
					<div class="grid-main-index-rights">{{	data02?data02.kfzt:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">规划用途：</div>
					<div class="grid-main-index-rights">{{	data02?data02.ghyt:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">建筑密度：</div>
					<div class="grid-main-index-rights">{{	data02?data02.zzmj:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">绿化率：</div>
					<div class="grid-main-index-rights">{{	data02?data02.lhl:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">容积率：</div>
					<div class="grid-main-index-rights">{{	data02?data02.rjl:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">车位个数：</div>
					<div class="grid-main-index-rights">{{	data02?data02.cwgs:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">售楼地址：</div>
					<div class="grid-main-index-rights">{{	data02?data02.sldz:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">售楼电话：</div>
					<div class="grid-main-index-rights">{{	data02?data02.sldh:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">四至范围：</div>
					<div class="grid-main-index-rights">{{	data02?data02.szfw:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">重大事故：</div>
					<div class="grid-main-index-rights">{{	data02?data02.zdsg:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">物业公司：</div>
					<div class="grid-main-index-rights">{{	data02?data02.wygs:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">物业费用：</div>
					<div class="grid-main-index-rights">{{	data02?data02.wyfy:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">外墙：</div>
					<div class="grid-main-index-rights">{{	data02?data02.wqcl:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">外窗：</div>
					<div class="grid-main-index-rights">{{	data02?data02.wc:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">安防：</div>
					<div class="grid-main-index-rights">{{	data02?data02.af:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">消防：</div>
					<div class="grid-main-index-rights">{{	data02?data02.xf:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">装修程度：</div>
					<div class="grid-main-index-rights">{{	data02?data02.zxcd:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">供水：</div>
					<div class="grid-main-index-rights">{{	data02?data02.gs:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">供电：</div>
					<div class="grid-main-index-rights">{{	data02?data02.gd:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">燃气：</div>
					<div class="grid-main-index-rights">{{	data02?data02.rq:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">电话线：</div>
					<div class="grid-main-index-rights">{{	data02?data02.dhx:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">网络光纤：</div>
					<div class="grid-main-index-rights">{{	data02?data02.wlgq:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">供暖：</div>
					<div class="grid-main-index-rights">{{	data02?data02.qn:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">空调：</div>
					<div class="grid-main-index-rights">{{	data02?data02.kt:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">阳台：</div>
					<div class="grid-main-index-rights">{{	data02?data02.yt:'' }}</div>
				</div>
				<div class="grid-main-index">
					<div class="grid-main-index-left">电梯：</div>
					<div class="grid-main-index-rights">{{	data02?data02.dt:'' }}</div>
				</div>
			</div>
			</el-scrollbar>
		</div>
		<!-- center下 -->
		<div class="page-grid gird-bgUrl gird-bgUrl6" style="position: relative;" >
			<div class="grid-main">
				<table class="m-table" >
					<thead>
						<tr class="m-tr1">
								<th class="m-th" >项目编号</th>
								<th class="m-th" >项目名称</th>
								<th class="m-th" >楼号</th>
								<th class="m-th" >楼层数</th>
						</tr>
					</thead>
					<tbody class="m-body" v-if="data06.records.length > 0">
						<tr class="m-tr" v-for="(data, index) in data06.records" :key="index" >
							<td class="m-td" >
										{{	data.xmbh }}
							</td>
							<td class="m-td" >
										{{	data.xmmc }}
							</td>
							<td class="m-td" >
										{{	data.lh }}
							</td>
							<td class="m-td" >
										{{	data.lc }}
							</td>
						</tr>
					</tbody>
					<div class="empty" v-else>暂无数据</div>
				</table>
				<div class="pag" v-if="data06">
					<span class="pag-click" @click="lastPage()">上一页</span>
					<div  class="pag-width">
						{{	data06.current }}
					</div>
					<span class="pag-click" @click="nextPage()">下一页</span>
					<span class="total-page">共{{	data06.pages }}页</span>
				</div>
			</div>
		</div>
		<!-- 右3 -->
		<div class="page-grid gird-bgUrl gird-bgUrl7">
			<div class="grid-main">
				<barLinePublic class="charH"
							v-if="data05.typeData.length > 0 "
							:housingSupplyStatsData="data05"
							@dialogData="dialogData"
				></barLinePublic>
			</div>
		</div>
	</div>
	<!-- <div class="shade"></div> -->
</div>
<magnify
  v-if="magnifyEchartData"
  :housingSupplyStatsData="magnifyEchartData"
  @closeDialog="closeDialog"
 ></magnify>
</div>
</template>
<script setup lang="ts">
import { ref,reactive, onMounted,onUnmounted} from 'vue';
import { useRoute } from "vue-router";
import { useRouter } from "vue-router";
import { barLineParamsData } from "@/utils/chartsPbulic";
import barLinePublic from "@/components/public/barLinePbulic.vue";
// import magnifyData from "@/components/public/magnify";
import {
	selectAdsKfjsFdcjsFdctzKfqyzzzsDA,
	selectProjectInfo,
	selectProjectStatistics,
	selectAdsFdcjyClfjyBdcdjBaxxjgDAOne,
	selectAdsFdcjyClfjyBdcdjBaxxjgDATwo,
	selectAdsFdcjyClfjyBdcdjZrzlbDA,
} from "@/api/propertyLife/propertyLifeDetail";

const route = useRoute();
const router = useRouter();
const xmmc = route.query.xmmc
const pageSize = ref(5)
const pageNum = ref(1)
const magnifyEchartData = ref(null)//放大框
//初始化数据
const data01 = ref(null)
const data02 = ref(null)
const data03 = reactive({
	cjzts:0,
	htbats:0,
	cjtshbzz:0,
	bzxse:0,
	szxse:0,
	xsehbzz:0,
})
const data04 = ref({
				typeData: [],
})
const data05 = ref({
	typeData: [],
})
const data06 = ref({
	records:[]
})

const data01Get = async() => {
	let {data} = await selectAdsKfjsFdcjsFdctzKfqyzzzsDA({xmmc:xmmc})
	data01.value = data
}
const data02Get = async() => {
	let {data} = await selectProjectInfo({xmmc:xmmc})
	data02.value = data
}
const data03Get = async() => {
	let {data} = await selectProjectStatistics({xmmc:xmmc})
 data03.cjzts = data.cjzts,
	data03.htbats = data.htbats,
	data03.cjtshbzz = data.cjtshbzz,
	data03.bzxse = data.bzxse,
	data03.szxse = data.szxse,
	data03.xsehbzz = data.xsehbzz
}
const data04Get = async() => {
	let {data} = await selectAdsFdcjyClfjyBdcdjBaxxjgDAOne({xmmc:xmmc})
	let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show:false,
    icon:'',
    left: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "0%",
    right: "0%",
    bottom: "3%",
    top: "15%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "套数",
        type: "1",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "rgba(234, 222, 91, 1)",
        b: "rgba(230, 222, 60, 0.59)",
      },
    ],
    legendStyle,
    gridConfig
  );
  data04.value = paramsData
}
const data05Get = async() => {
	let {data} = await selectAdsFdcjyClfjyBdcdjBaxxjgDATwo({xmmc:xmmc})
	let getLineBarArrData = getLineBarArr(data.columnList,data.brokenList)
  let lineBarArr:Array<number> = getLineBarArrData[0]
  let lineBarType:Array<number> = getLineBarArrData[1]
  let seriesType = []
  for(let i = 0; i < lineBarType.length; i++){
    let typeIndex;
    let typeName;
    if(lineBarType[i] == 1){
      typeIndex = 1
      typeName = "bar"
    }else{
      typeIndex = 2
      typeName = "line"
    }
    seriesType.push({
        name: typeName,
        type: typeIndex,
        areaStyleType: "1",
        stack: "1",
    })
  }
  let legendStyle = {
    show:true,
    icon:'',
    left: 0,
    top: 0,
    itemWidth: 14,
    itemHeight: 10,
    itemGap: 8,
  };
  let gridConfig = {
    left: "0%",
    right: "0%",
    bottom: "3%",
    top: "15%",
  };
  let paramsData = barLineParamsData(
    data.nameList,
    data.abscissaList,
    [
      {
        name: "",
        type: "1",
      },
    ],
    seriesType,
    lineBarArr,
    [
      {
        a: "rgba(14, 129, 255, 1)",
        b: "rgba(14, 129, 255, 0.20)",
      },
						{
        a: "rgba(90, 190, 82, 1)",
        b: "rgba(90, 190, 82, 0.20)",
      },
						{
        a: "rgba(234, 222, 91, 1)",
        b: "rgba(230, 222, 60, 0.59)",
      },
    ],
    legendStyle,
    gridConfig
  );
  data05.value = paramsData
}
const data06Get = async() => {
	let {data} = await selectAdsFdcjyClfjyBdcdjZrzlbDA({xmmc:xmmc,pageSize:pageSize.value,pageNum:pageNum.value})
	data06.value = data
}
// 打开弹框
const dialogData = (val) => {
  magnifyEchartData.value = val
}
//关闭弹框
const closeDialog = (val) => {
  magnifyEchartData.value = null
}
//上一页
const lastPage = () => {
		if(pageNum.value > 1){
			pageNum.value = pageNum.value - 1
			data06Get()
		}
}
//下一页
const nextPage = () => {
	if(pageNum.value < data06.value.pages){
		pageNum.value = pageNum.value + 1
		data06Get()
	}
}
//合并柱状折线图数据
const getLineBarArr = (policy: Array<number>,resul: Array<number>): Array<any>=>{
  let type = []
  for(let i = 0 ; i< policy.length;i++){
  type.push(1)
  }
  for(let i = 0 ; i < resul.length;i++){
    type.push(2);
    policy.push(resul[i]);
  }
  return[policy,type]
} 
// 返回
const returnPage = (val) => {
  router.go(-1);
}
const allFun = () => {
 data01Get()
	data02Get()
	data03Get()
	data04Get()
	data05Get()
	data06Get()
}
allFun();
onMounted(()=>{

})
</script>
<style scoped lang='less'>
.shade{
	width: 100vw;
	height: 100vh;
	position: fixed;
	top: 0px;
	pointer-events: none;
	background: url('../../assets/img/propertyLife/shadowBg.png');
	background-size:100% 100%;
	background-repeat: no-repeat;
}
.page-box{
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background-image: url('../../assets/img/realEstate/pageBg.png');
	background-size: 100% 100%;
  background-repeat: no-repeat;
	.page-title{
		position: fixed;
		top: 0px;
		width: 100vw;
		height: 85px;
  background-image: url('../../assets/img/propertyLife/headBg.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
		opacity: 1;
		z-index: 1;
	}
	.page-main{
		width: 100vw;
		height: calc(100vh - 85px);
		position: relative;
		top: 105px;
		display: grid;
		grid-template-columns: 520px 780px 520px;
  grid-template-rows: repeat(3, 300px);
  grid-gap: 20px 20px;
  place-content: start center;
		.page-grid{
			.grid-main{
					color:#ffffff;
					font-size: 16px;
					margin-top: 65px;
					margin-left: 15px;
					margin-right: 15px;
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					.grid-main-index{
						padding-left: 5px;
						.grid-main-index-left{
							// width: 128px;
							text-align: left;
						}
						.grid-main-index-right{
							width: 120px;
							white-space: nowrap; 
							overflow: hidden; 
							text-overflow: ellipsis;
						}
						
					}
			}
		}
			.gird-bgUrl1{
				background: url('../../assets/img/propertyLife/grid1.png');
			}
			.gird-bgUrl2{
				background: url('../../assets/img/propertyLife/grid2.png');
			}
			.gird-bgUrl3{
				background: url('../../assets/img/propertyLife/grid3.png');
			}
			.gird-bgUrl4{
				background: url('../../assets/img/propertyLife/grid4.png');
			}
			.gird-bgUrl5{
				background: url('../../assets/img/propertyLife/grid5.png');
			}
			.gird-bgUrl6{
				background: url('../../assets/img/propertyLife/grid6.png');
			}
			.gird-bgUrl7{
				background: url('../../assets/img/propertyLife/grid7.png');
			}
			.gird-bgUrl{
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
			.grid-main-bg{
				width: 370px;
				height: 153px;
				background: url('../../assets/img/propertyLife/centerBg.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;
				display: flex;
				justify-content: space-around;
				align-items: center;
				padding: 0px 20px;
				.bg-index{
					width: 100px;
					text-align: center;
					position: relative;
					.bg-index-top{
						font-weight: bold;
						font-size: 24px;
						color: #01F3F6;
						margin-bottom: 5px;
						width: 100px;
						white-space: nowrap; 
						overflow: hidden; 
						text-overflow: ellipsis;
						position: relative;
						.bg-index-top-tool{
							font-weight: bold;
							font-size: 24px;
							color: #01F3F6;
							margin-bottom: 5px;
							width: 100px;
							position: absolute;
						}
					}
					.bg-index-top:hover{
						cursor: pointer;
					}
					.bg-index-bottom{
						font-weight: bold;
						font-size: 16px;
						color: #FFFFFF;
						margin-top: 5px;
					}
				}
			}
	}
}
.grid-mains{
		color:#ffffff;
		font-size: 14px;
		margin-top: 65px;
		margin-left: 15px;
}
.grid-main1{
		color:#ffffff;
		font-size: 14px;
		display: flex;
		justify-content: center;
		.grid-main-bg:first-child{
			margin-right: 10px;
		}
		.grid-main-bg:last-child{
			margin-left: 10px;
		}
}
.grid-main2{
	color:#ffffff;
	font-size: 14px;
	// margin-top: 65px;
	margin-left: 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.grid-main-index{
		padding-left: 5px;
		.grid-main-index-left{
			 width: 80px;
			text-align: right;
		}
		.grid-main-index-rights{
			width: 120px;
			white-space: nowrap; 
			overflow: hidden; 
			text-overflow: ellipsis;
		}
		.grid-main-index-right{
			width: 120px;
			white-space: nowrap; 
			overflow: hidden; 
			text-overflow: ellipsis;
		}
		
	}
}
.grid-main-index{
						display: flex;
						padding: 8px 0px;
			}
.scrolls{
	margin-top: 70px;
	height: 210px;
}
.rem2{
	width: 400px !important;
}
.charH{
	width: 100%;
	height: 230px;
}
td {
  padding: 0;
  margin: 0;
}
.m-table{
	width: 100%;
	border-spacing:0px !important;
	.m-th{
		padding: 5px 0px;
	}
	.m-td{
		text-align: center;
		padding: 5px 0px;
	}
	.m-tr:hover{
		cursor: pointer;
		background: rgba(240,240,240,0.5);
	}
}
.pag{
	position: absolute;
	bottom: 15px;
	display: flex;
	justify-content: center;
	width: 100%;
	span{
		color: #ffffff;
	}
	.pag-width{	
		padding: 0px 10px;
		white-space: nowrap; /* 确保文本不换行 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  text-overflow: ellipsis; /* 使用省略号显示被截断的文本 */
		color: white; /* Text color */
		background-image: linear-gradient(to right, white 70%, rgba(255, 255, 255, 0) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent; /* Ensure compatibility with Safari */
		text-fill-color: transparent;
	}
	.pag-widths{
		color: white; /* Text color */
	}
	.pag-index{
		margin: 0px 10px;
	}
	.pag-click{
		text-decoration: underline;
	}
	.pag-click:hover{
		cursor: pointer;
	}
	.pag-click:first-child{
		// margin-right: 10px;
	}
	.pag-click:last-child{
		margin-left: 10px;
	}
	.total-page{
		margin-left: 20px;
	}
}
.empty{
	width: 100%;
	text-align: center;
	margin-top: 70px;
	position: absolute;
}
</style>
